
<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="references/css/bootstrap.min.css" rel="stylesheet">
    <link href="references/css/sb-admin.css" rel="stylesheet">
	<link rel="stylesheet" href="references/css/font-awesome.min.css">
	<!-- calen -->
	<link rel="stylesheet" href="references/css/calendar.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="row">
   <div class="header-nav" style="min-height:44px">
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
	<div class="">
    <div class="navbar-header" style="margin-left:0px; margin-right:0px;width:100%">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <html:link action="/goHome" styleClass="navbar-brand">Navi Calender</html:link>
		<div class="">
    <div class="right-menu" style="margin-right:15px">
        <ul class="nav navbar-nav navbar-right" style="margin-bottom:0px">
       
			
        <li class="dropdown" style="float:right">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
		 ${userInfo.username }
				${role }
		  <b class="caret" style="margin-left:5px;"></b></a>
          <ul class="dropdown-menu">
          	<logic:equal name="role" value="Administrator">
					<li><html:link action="/directorRegister">Add new user</html:link></li>
					<li><html:link action="/viewAllUser">View All User</html:link></li>
			</logic:equal>
           <logic:equal name="role" value="Manager">
					<li><html:link action="/directorCreateProject">Create Project</html:link></li>
					<li><html:link action="/viewAllProject">View My Project</html:link></li>
			</logic:equal>
            <li><html:link action="/directorChangePassword">Change pass</html:link></li>
            <li>	<html:link action="/directorViewProfile">Update Profile</html:link></li>
            <li class="divider"></li>
            <li><html:link action="/logout">Logout</html:link></li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
    </div>
	</div>
     
	
  </div><!-- /.container-fluid -->
</nav>
	</div>
	 <div class="clearfix"></div>
	</div>
	
	
	<div class="row">
		<div class="col-lg-2">
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	
		<ul class="nav navbar-nav side-nav">
            <li class="active"><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#"><i class="fa fa-bar-chart-o"></i> Charts</a></li>
            <li><a href="#"><i class="fa fa-table"></i> Tables</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-square-o-down"></i> Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown Item</a></li>
                <li><a href="#">Another Item</a></li>
                <li><a href="#">Third Item</a></li>
                <li><a href="#">Last Item</a></li>
              </ul>
            </li>
			<li><a href="#"><i class="fa fa-edit"></i> Forms</a></li>
            <li><a href="#"><i class="fa fa-font"></i> Typography</a></li>
            <li><a href="#"><i class="fa fa-desktop"></i> Bootstrap Elements</a></li>
            <li><a href="#"><i class="fa fa-wrench"></i> Bootstrap Grid</a></li>
            <li><a href="#"><i class="fa fa-file"></i> Blank Page</a></li>
            
          </ul>
		  </div>
    </div><!-- /.navbar-collapse -->
	</div>
	
	<section class="main-warraper" style="padding:15px">
	<div class="col-lg-10 col-lg-offset-2">

<!-- hidden -->
	<!-- end hidden -->

<!--begin main wrapp-->
	<tiles:insertAttribute name="body" />
	<!--begin main wrapp-->

</div>
	</section>
		
	<footer class="footer-page">
	</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="references/js/bootstrap.min.js"></script>
	<!-- calendar plugins -->
	<script src="references/js/jquery-ui-datepicker.min.js"></script>
<script>
	$('#calendar').datepicker({
		inline: true,
		firstDay: 1,
		showOtherMonths: true,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
	});
</script>
	  </body>
</html>